import React from "react";
import {observer} from "mobx-react";
import {Space} from "antd";
import {TableCard} from "@/components";
import Inputs from "./Inputs";
import InputSimple from "./InputSimple";
import css from "./index.module.less";

/**
 * columns 中自定义的几个参数用法。其他参数同antd的Table组件
 *
 * modal: 弹窗类型。有此参数，则表示此列回车或点击后面的三个点，会弹出一个弹窗，选择对应的数据
 * type:  输入框类型。有此参数，则便是该单元格为输入框，可输入数字、日期、时间等
 * onChange: 输入框的回调函数，如果没有定义modal和type,则为此参数无效
 * */
export default observer(function (props) {

  // 处理columns
  function handleColumns() {
    let newColumns = []
    props.columns.forEach(c => {
      if (c.readOnly) {
        newColumns.push(c)
      } else if (c.modal) {
        newColumns.push(renderInputWithModal(c))
      } else if (c.type) {
        newColumns.push(renderInputSimple(c))
      } else {
        newColumns.push(c)
      }
    })

    return newColumns
  }

  // 渲染带弹窗的输入框
  function renderInputWithModal(item) {
    item.render = (txt, info) => (
      <Inputs
        value={txt}
        name={item.name}
        type={item.modal}
        onChange={(val) => item.onChange(info, val)}/>
    )
    return item
  }

  // 渲染简单输入框
  function renderInputSimple(item) {
    item.render = (txt, info) => (
      <InputSimple
        value={txt}
        type={item.type}
        onChange={(val) => item.onChange(info, val)}/>
    )
    return item
  }

  return (
    <div className={css.commonTable}>
      {/* 顶部标题栏 */}
      <div className={css.header}>
        {props.header}
      </div>
      {/* 标题栏下面的区域，可放表单内容等 */}
      <div className={css.params}>
        {props.params}
      </div>
      {/* 表格内容 */}
      <div className={`${css.content} scroll`}>
        <TableCard
          rowKey="id"
          sticky
          bordered
          outline
          rowClassName={css.inputRow}
          columns={handleColumns()}
          dataSource={props.dataSource}
          pagination={false}
          scroll={props.scroll || {y: "calc(100vh - 290px)"}}
        />
      </div>
      {/* 底部内容 */}
      <div className={css.footer}>
        <Space>
          {props.summary}
        </Space>
        <Space>
          {props.actions}
        </Space>
      </div>
    </div>
  )
})
